<template>
  <v-scale-screen class="page-bg">
    <div class="bigData">
      <div class="bigData-title">
        <!-- <span class="fontColor title">OFS履约数据大屏</span> -->
        <headTitle></headTitle>
        <div class="refreshTime">
          <a-tooltip>
            <template #title> 说明文档 </template>
            <svg
              @click="
                goTo(
                  'https://alidocs.dingtalk.com/i/nodes/YndMj49yWjPmvMnnFQAEam0oJ3pmz5aA?cid=63025599763&corpId=ding54935d706dcb0473a1320dcb25e91351&doc_type=wiki_doc&iframeQuery=utm_medium=im_card&utm_source=im&utm_medium=im_card&utm_scene=team_space&utm_source=im'
                )
              "
              style="position: absolute; top: 28px; left: -22px"
              t="1735007040563"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5218"
              width="20"
              height="20"
            >
              <path
                d="M160 827.008l114.005333-91.008h526.037334a64.768 64.768 0 0 0 64-64V256a64.810667 64.810667 0 0 0-64-64H224A64.810667 64.810667 0 0 0 160 256v571.008H160z m136.021333-27.008l-148.053333 118.016c-10.666667 8.021333-21.802667 9.173333-33.450667 3.498667-11.690667-5.674667-17.877333-15.189333-18.517333-28.501334V256c0.64-36.010667 13.141333-66.176 37.504-90.496 24.32-24.32 54.528-36.821333 90.496-37.504h576c36.010667 0.64 66.176 13.141333 90.496 37.504 24.32 24.32 36.821333 54.528 37.504 90.496v416c-0.64 36.010667-13.141333 66.176-37.504 90.496-24.32 24.32-54.485333 36.821333-90.496 37.504H295.978667zM352 512h320c21.333333 0 32 10.666667 32 32s-10.666667 32-32 32h-320c-21.333333 0-32-10.666667-32-32s10.666667-32 32-32z m0-192h320c21.333333 0 32 10.666667 32 32s-10.666667 32-32 32h-320c-21.333333 0-32-10.666667-32-32s10.666667-32 32-32z"
                fill="#ffffff"
                fill-opacity=".96"
                p-id="5219"
              ></path>
            </svg>
          </a-tooltip>
          刷新时间: {{ refreshTime }}
        </div>
      </div>
      <div class="bigData-content">
        <div class="bigData-content-item">
          <div class="item">
            <tipTitle
              :cssClass="{
                background:
                  'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
              }"
            >
              <template #title>
                <span
                  style="
                    color: rgb(64, 240, 255);
                    font-size: 18px;
                    padding: 10px;
                  "
                  >售后数据模块（独立站）</span
                >
                <!-- <a-button type="text" style="color:#fff" @click="openService">查看数据</a-button> -->
              </template>
            </tipTitle>
            <borderBox6 style="width: 460px; height: 290px">
              <water ref="waterRef" />
            </borderBox6>
          </div>
          <div class="item">
            <tipTitle
              :cssClass="{
                background:
                  'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
              }"
            >
              <template #title>
                <span
                  style="
                    color: rgb(64, 240, 255);
                    font-size: 18px;
                    padding: 10px;
                  "
                  >订单总体趋势</span
                >
                <!--                <div style="display: flex;justify-content: flex-end;">-->
                <!--                  <a-button type="text" style="color:#fff">查看数据</a-button>-->
                <!--                </div>-->
              </template>
            </tipTitle>
            <orderTrend ref="orderTrendRef" />
          </div>
          <div class="item">
            <tipTitle
              :cssClass="{
                background:
                  'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
              }"
            >
              <template #title>
                <span
                  style="
                    color: rgb(64, 240, 255);
                    font-size: 18px;
                    padding: 10px;
                  "
                  >头程履约</span
                >
                <div style="display: flex; justify-content: flex-end">
                  <a-button
                    type="text"
                    style="color: #fff"
                    @click="goTo('/tail/headAnalysis')"
                    >查看数据</a-button
                  >
                </div>
              </template>
            </tipTitle>
            <headAnalysis ref="headAnalysisRef" />
          </div>
        </div>
        <div class="bigData-content-item middle">
          <div class="top">
            <tipTitle
              :cssClass="{
                background:
                  'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
                height: '50px;',
              }"
            >
              <template #title>
                <span
                  style="
                    color: rgb(64, 240, 255);
                    font-size: 18px;
                    padding: 10px;
                  "
                  >全美实时销售（全平台）</span
                >
              </template>
            </tipTitle>
            <Map ref="mapRef" />
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <pie ref="pieRef" @openTable="openTimeTable" />
            </div>
            <div class="bottom-item">
              <tipTitle
                :cssClass="{
                  background:
                    'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
                }"
              >
                <template #title>
                  <span
                    style="
                      color: rgb(64, 240, 255);
                      font-size: 18px;
                      padding: 10px;
                    "
                    >尾程履约</span
                  >
                  <!--                  <a-button type="text" style="color:#fff" @click="openTimeTable">查看数据</a-button>-->
                </template>
              </tipTitle>
              <!--              <div style="height: 290px;width: 462px;background: transparent;position: relative;">-->
              <!--                <a-spin tip="加载中..." size="large" :indicator="indicator" style="font-size: 30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)"/>-->
              <!--              </div>-->
              <ofsTime ref="ofsTimeRef" />
            </div>
          </div>
        </div>
        <div class="bigData-content-item">
          <div class="item">
            <tipTitle
              :cssClass="{
                background:
                  'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
              }"
            >
              <template #title>
                <span
                  style="
                    color: rgb(64, 240, 255);
                    font-size: 18px;
                    padding: 10px;
                  "
                  >AB等级现货率</span
                >
              </template>
            </tipTitle>
            <spotRate ref="spotRateRef"></spotRate>
          </div>
          <div class="item">
            <realTimeTable ref="realTimeTableRef" />
          </div>
          <div class="item">
            <tipTitle
              :cssClass="{
                background:
                  'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)',
              }"
            >
              <template #title>
                <span
                  style="
                    color: rgb(64, 240, 255);
                    font-size: 18px;
                    padding: 10px;
                  "
                  >卡派提货及时率</span
                >
                <div style="display: flex; justify-content: flex-end">
                  <a-button
                    type="text"
                    style="color: #fff"
                    @click="goTo('/tail/tailDelivery')"
                    >查看数据</a-button
                  >
                </div>
              </template>
            </tipTitle>
            <orderStatistics ref="orderStatisticsRef" />
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
  <timeTable :open="showTimeTable" @close="closeTimeTable" />
</template>
<script setup>
import dayjs from "dayjs";
import { ref, onMounted, onBeforeUnmount, shallowRef, h } from "vue";
import VScaleScreen from "v-scale-screen";
import Map from "@/components/bigData/map.vue";
import tipTitle from "@/components/bigData/component/title.vue";
import dataTable from "@/components/bigData/component/dataTable.vue";
import timeTable from "@/components/bigData/component/timeTable.vue";
import pie from "@/components/bigData/pie.vue";
import realTimeTable from "@/components/bigData/realTimeTable.vue";
import orderTrend from "@/components/bigData/orderTrends.vue";
import ofsTime from "@/components/bigData/ofsTime.vue";
import orderStatistics from "@/components/bigData/orderStatistics.vue";
import water from "@/components/bigData/water.vue";
import borderBox6 from "@/components/bigData/component/borderBox6/index.vue";
import headTitle from "@/components/bigData/component/headTitle.vue";
import spotRate from "@/components/bigData/spotRate.vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { ChatLineSquare } from "@element-plus/icons-vue";
const waterRef = ref();
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: "100px",
  },
  spin: true,
});
const pieRef = ref();
const orderTrendRef = ref();
const orderStatisticsRef = ref();
const ofsTimeRef = ref();
const spotRateRef = ref();
const realTimeTableRef = ref();
const headAnalysisRef = ref();
const showTimeTable = ref(false);
const mapRef = shallowRef();
const refreshTime = ref("");
let timer;
const openService = () => {
  window.open(import.meta.env.VITE_JUICE + "pages/salesData/skuTable");
};
const openTimeTable = () => {
  showTimeTable.value = true;
};
const closeTimeTable = () => {
  showTimeTable.value = false;
};
const goTo = (path) => {
  window.open(path, "_blank");
};
onMounted(() => {
  console.log("bigData mounted", realTimeTableRef.value);
  timer = setInterval(() => {
    waterRef.value.init();
    pieRef.value.init();
    orderTrendRef.value.init();
    orderStatisticsRef.value.init();
    mapRef.value.init();
    realTimeTableRef.value.init();
    spotRateRef.value.init();
    headAnalysisRef.value.init();
    refreshTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }, 1000 * 60 * 10);
  refreshTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
});
onBeforeUnmount(() => {
  clearInterval(timer);
});
const gmvData = ref([
  {
    site: "北京",
    gmv: 100000,
    discount: 10000,
    rank: "NO.1",
  },
  {
    site: "北京",
    gmv: 100000,
    discount: 10000,
    rank: "NO.1",
  },
]);
const gmvColumns = [
  {
    title: "站点",
    dataIndex: "site",
    key: "site",
    align: "center",
  },
  {
    title: "GMV(包含折扣)",
    dataIndex: "gmv",
    align: "center",
  },
  {
    title: "折扣全额",
    dataIndex: "discount",
    align: "center",
  },
  {
    title: "排名",
    dataIndex: "rank",
    align: "center",
  },
];
</script>

<style scoped lang="less">
.tip {
  border: 1px solid #e2b91f;
  color: #e2b91f;
  text-align: center;
  border-radius: 8px;
  padding: 5px;
}
.page-bg {
  // background-color:#032147 ;
  background: linear-gradient(to right, #032147, #0b3764, #032147) !important;
}
.bigData {
  &-title {
    width: 100%;
    background-image: url(@/assets/kanban/page_head.svg);
    background-size: cover;
    text-align: center;
    height: 76px;
    line-height: 76px;
    margin-bottom: 4px;
    position: relative;

    .refreshTime {
      color: #fff;
      position: absolute;
      font-size: 14px;
      right: 10px;
      bottom: -1px;
    }
  }

  &-content {
    display: flex;
    justify-content: space-around;
    height: calc(100% - 41px);

    &-item {
      width: 24%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .item {
        height: 33%;
      }
    }

    .middle {
      width: 49%;

      .top {
        height: 66.4%;
      }

      .bottom {
        height: 33%;
        display: flex;
        justify-content: space-between;

        &-item {
          width: 49%;
        }
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .bigData {
    &-title {
      .title {
        font-size: 24px;
        margin-top: 100px;
        margin-bottom: 10px;
      }
      .top {
        height: 65%;
      }

      .bottom {
        height: 32%;
        display: flex;
        justify-content: space-between;

        &-item {
          width: 49%;
        }
      }
    }
  }
}

.middle {
  width: 49%;

  .top {
    height: 66%;
  }

  .bottom {
    height: 33%;
    display: flex;
    justify-content: space-around;

    &-item {
      width: 49%;
    }
  }
}

@keyframes text-slide {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
:deep(.ant-select-selection-item) {
  color: #fff !important; /* 你想要的文字颜色 */
}
</style>
